<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理信息系统课程设计 | MISP</title>
    <!-- Freemarker标签-->
    <#include "/inc/head.ftl"/>
    <@head/>   
</head>
<body>
    <div id="wrapper">
        <!-- Navigation -->
        <#include "/inc/nav.ftl"/>
		<@nav/>  
        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                <div class="panel-body">
	                    <button id="btn-add"  type="button" class="btn btn-success">添加客户</button>
	                    <button id="btn-edit"  type="button" class="btn btn-warning">修改客户</button>
	                    <button id="btn-del" type="button" class="btn btn-danger">删除客户</button>
                    </div>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading"> 客户列表</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="list">
                                <thead>
                                    <tr>
                                        <th>客户ID</th>
                                        <th>客户名称</th>
                                        <th>描述</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
     			<div class="modal-dialog">
        			<div class="modal-content">
           				<div class="modal-header">             				
                           <h4 class="modal-title" id="myModalLabel">客户名</h4>
          			</div>
          			<input  id="id" type="hidden" class="form-control">
	          		<div class="modal-body"> 
	          		    <div class="row">
							 <div class="col-lg-12">
                                    <form role="form">
                                        <div class="form-group">
                                            <label>客户名</label>
                                            <input id="title"   class="form-control">
                                        </div>
                                        
                                        <div class="form-group">
                                            <label>描述</label>
                                            <textarea id="content"   class="form-control" rows="3"></textarea>
                                        </div>
                                    </form>
                                </div>
                            </div>
						</div>
		          		<div class="modal-footer">
		          		        <button id="btn-submit" type="submit" class="btn btn-default">提交</button>
                                <button id="btn-reset" type="reset" class="btn btn-default">重置</button>
		             			<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		               </div>
	              </div><!-- /.modal-content -->
 			  </div>          
        </div>

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- Page-Scripts  -->
    <script>
    $(document).ready(function() {
    	var table = $('#list').DataTable({   //此处list与页面table的id相同
        	ajax: '${contextPath}/customer/list',
        	language: {
    			"url": "${contextPath}/vendor/datatables/i18n/Chinese.json"   //datatables国际化
			}, 
            columns: [
                 {data: "id","visible" : false},
    			 {data: "title"},
                 {data: "content"}
    	   ],
           responsive: true,
           select: true //datatables select 插件
        });
		
		/* 添加按钮 */
    	$('#btn-add').click( function () {
    		resetForm();
    		$("#myModal #id").val("");
    		$("#myModal #myModalLabel").text("添加客户");
    		$('#myModal').modal({keyboard:false,show:true})
        } ); 
		
    	/* 修改按钮 */
    	$('#btn-edit').click( function () {
    		var rowData =table.rows( { selected: true } ).data().toArray();
	   		 if(rowData.length==1){
	   			 var id = rowData[0].id;
	   			$.ajax({
	   				type:"get",
	   				url:"${contextPath}/customer/edit",
	   				data : { 
    					"id" : id
    				},
	   				dataType:"json",
	   				success: function(json){
	   						$("#myModal #id").val(json.customer.id);							
	   						$("#myModal #title").val(json.customer.title);
	   						$("#myModal #content").val(json.customer.content);
	   				}	
	   			});	
	   			$("#myModal #myModalLabel").text("修改客户");
	    		$('#myModal').modal({keyboard:false,show:true})
	   		 }else{
	   			layer.msg('请选择一行!', {time: 1000, icon:7});   //layer弹出层，1000代表1秒后关闭。7为图标编号
	   		 }
        } ); 
    	
    	/* 删除按钮 */
    	$('#btn-del').click( function () {
    		 var rowData =table.rows( { selected: true } ).data().toArray();  //得到datatables选中行的值并转成数组
    		 if(rowData.length==1){
    			 layer.msg('你确定删除该记录吗?', {time: 0 ,btn: ['确定', '取消'],yes: function(index){
	    			 	del(rowData[0].id);
	    			 	layer.close(index);
		   				}
	   			});
    		 }else{
    			 layer.msg('请选择一行!', {time: 1000, icon:7});
    		 }
    	} ); 
    	
    	/* 表单添加、修改提交按钮 */
    	$("#myModal #btn-submit").click( function () {
    		var id = $("#myModal #id").val();
    		 if(id == null || id == ""){   //将添加和编辑表单合二为一。根据ID是否为空判断到底是添加还是修改。
    			submit("${contextPath}/customer/save");
    		}else{
    			submit("${contextPath}/customer/update"); 
    		}
    	} ); 
    	
    	$("#myModal #btn-reset").click( function () {
    		resetForm();
    	} ); 
    	
    	/* 清空表单 */
    	function resetForm(){
    		$("#myModal #title").val("");
    		$("#myModal #content").val("");
    	}
    	
    	 /* 表单提交操作 */
    	function submit(url){
    		var id = $("#myModal #id").val();
    		var title = $("#myModal #title").val();
    		var content = $("#myModal #content").val();
    			$.ajax({
    				type : "post",
    				url : url,
    				dataType : "json",
    				data : { 
    					"customer.id":id,    //注意此处的customer与customer对应，id与Customer的属性id对应
    					"customer.title" : title,
    					"customer.content" : content
    				},
    				success : function(data) {
    					if(data.result){
	    					layer.msg(data.msg, {time: 1000, icon:1});
	    					resetForm();
	    					$("#myModal").modal('hide');
	    					table.ajax.reload();//重新加载table
    					}
    				},
    				error : function() {
    					layer.msg('操作失败!', {time: 1000, icon:2});
    				}
    			});
    	}
    	/* 删除操作 */
    	function del(id){
    			$.ajax({
    				type : "post",
    				url : "${contextPath}/customer/delete",
    				dataType : "json",
    				data : { 
    					"id" : id
    				},
    				success : function(data) {
    					if (data.result){
    						layer.msg(data.msg, {time: 1000, icon:1});
        					table.ajax.reload();
    					}
    				},
    				error : function() {
    					layer.msg('系统出错!', {time: 1000, icon:2});
    				}
    			});
    	}	
    });
    </script>
	</body>
</html>
